import { memo, forwardRef, useState } from 'react'
import './index.scss'
const Options = forwardRef((props: any, ref: any) => {
    const { navList = [], handleChangeTab } = props
    const [currentIndex, setCurrentIndex] = useState<number>(0)
    const handleChange = (index: number, mode: string) => {
        setCurrentIndex(index)
        handleChangeTab && handleChangeTab(mode)
    }
    return (
        <>
            <div className="nav">
                {
                    navList.map((item: any, index: number) => {
                        return (
                            <div
                                className={`nav-item ${currentIndex === index ? 'active' : ''}`}
                                key={index}
                                style={{ backgroundImage: `url(${item.bg})` }}
                                onClick={() => handleChange(index, item.mode)}
                                title={item.value}
                            >
                                <div style={{ fontSize: '12px' }}>{item.title}({item.unit})</div>
                                <div style={{ fontSize: '24px' }} className="value">{item.value}</div>
                            </div>
                        )
                    })
                }
            </div>
        </>
    )
})

export default memo(Options)